<template>
  <div class="container">
    <van-nav-bar title="信息录入" left-arrow @click-left="onClickLeft" />
    <div class="container-step">
      <Steps :currentSwipeItem="1"></Steps>
    </div>
    <div class="container-form">
      <van-form>
        <van-cell-group inset>
          <van-field v-model="formData.name" name="name" label="姓名" placeholder="请输入" />
          <van-field v-model="formData.telphone" name="telphone" label="电话号码" placeholder="请输入" />
          <van-field v-model="formData.idCard" name="idCard" label="身份证号" placeholder="请输入" />

          <van-field v-model="formData.sex" is-link readonly label="性别" placeholder="请选择" @click="showPicker = true" />
          <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
          </van-popup>


          <van-field v-model="formData.type" name="type" label="申请单位/个人" placeholder="请输入" />
          <van-field v-model="formData.contactPerson" name="contactPerson" label="联系人" placeholder="请输入" />
        </van-cell-group>
      </van-form>
    </div>
    <div style="margin: 16px;">
      <van-button style="width: 85%;margin-bottom: 10px;" type="primary" @click="nextStep">
        下一步
      </van-button>
      <van-button style="width: 85%;margin-bottom: 10px;" plain type="primary" @click="previouStep">
        上一步
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { showToast } from 'vant';
import { reactive, ref } from 'vue'
const onClickLeft = () => history.back();
const active = ref(1)
const formData = reactive({
  name: '',
  telphone: '',
  idCard: '',
  type: '',
  sex: '',
  contactPerson: ''
})
const columns = [
  { text: '男', value: '0' },
  { text: '女', value: '1' },
]
const showPicker = ref(false);

const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  formData.sex = selectedOptions[0].text;
};
const router = useRouter()
const nextStep = () => {
  router.push({
    name: 'UploadFile'
  })
}
const previouStep = () => {
  router.push({
    name: 'Guidance'
  })
}


</script>

<style lang="scss" scoped>
.container {

  &-step {
    width: 100%;
    height: 80px;
    background-color: #fff;
  }

  .van-cell-group--inset {
    margin: 0 10px;
  }

  &-form {
    width: 100%;
    margin-top: 20px;
  }

}
</style>